// 固定table的高度

// 监听元素宽度变化插件
import elementResizeDetectorMaker from 'element-resize-detector'
// 节流函数
import { throttle } from '@/utils/index'
// head高度
import { mapGetters } from 'vuex'
// css变量
import variables from '../styles/variables.module.scss'

const mixin = {
    computed: {
        ...mapGetters(['settings']),
        // table最大高度
        tableMaxHeight() {
            // 10 搜索栏margin-bottom
            return this.clientHeight - this.navbarHeight - this.tabsHeight - this.mainContentPadding - this.mainContentWrapPadding - this.wrapFormHeight - 10 - this.pagination
        },
        // navbar高度
        navbarHeight() {
            return parseInt(variables.headNavbarHeight)
        },
        // tabs高度
        tabsHeight() {
            return this.settings.showTabs ? parseInt(variables.headTabsHeight) : 0
        },
        // main内边距
        mainContentPadding() {
            return parseInt(variables.mainContentPadding) * 2
        },
        // main - wrap内边距
        mainContentWrapPadding() {
            return parseInt(variables.mainContentWrapPadding) * 2
        }
    },
    data() {
        return {
            // 屏幕高度
            clientHeight: 1200,
            // 搜索框高度
            wrapFormHeight: 80,
            // 分页高度
            pagination: 52
        }
    },
    methods: {
        // 屏幕视口高度变化
        windowResize() {
            this.clientHeight = document.body.clientHeight
        },
        // 搜索条件高度变化
        formResize(element) {
            this.wrapFormHeight = element.offsetHeight
        }
    },
    mounted() {
        // 初始化屏幕高度
        this.windowResize()
        // 监听屏幕高度变化
        window.addEventListener('resize', throttle(this.windowResize, 1000), false)
        // 监听搜索栏高度变化
        let erd = elementResizeDetectorMaker()
        // 判断是否有分页
        let wrapPagination = document.getElementById('pagination')
        this.pagination = wrapPagination ? this.$options.data().pagination : 0
        // 判断是否有搜索条件
        let wrapFormElement = document.getElementById('wrap-form')
        if (!wrapFormElement) return
        erd.listenTo(wrapFormElement, throttle(this.formResize, 100))
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.windowResize, false)
    }
}

export default mixin
